<template>
  <div class="page">
    <modal ref="modal"
           modalTitle="输入内容"
           @action="action">
      <!-- <view class="">
        <textarea maxlength="-1"
                  v-model:value="content"
                  placeholder="写点什么吧"></textarea>
      </view> -->
      <view class="write cu-form-group">
        <textarea maxlength="-1"
                  v-model:value="content"
                  placeholder="写点什么吧"></textarea>
      </view>
    </modal>
    <fui-drawer :show="show"
                @close="closeDrawer">
      <scroll-view scroll-y
                   class="fui-scroll__view">
        <view class="content">
          <div class="item">
            <cell @showModal="showModal"></cell>
          </div>
          <div class="item">
            <view class="title">模板</view>
            <checkbox @checkBox="checkBox"
                      :radioItems.sync="radioItems">
            </checkbox>
          </div>
          <div class="item">
            <dayPicker :day.sync="day"></dayPicker>
          </div>
          <div class="item">
            <timePicker :time.sync="time"></timePicker>
          </div>
          <view class="cu-bar bg-white justify-end">
            <view class="action">
              <button class="cu-btn line-green text-green"
                      @tap="closeDrawer">取消</button>
              <button class="cu-btn bg-green margin-left"
                      @tap="editContent()">确定</button>
            </view>
          </view>
        </view>
      </scroll-view>
    </fui-drawer>
  </div>
</template>

<script>
import checkbox from '@/component/checkbox.vue'
import timePicker from '@/component/timePicker.vue'
import dayPicker from '@/component/dayPicker.vue'
import cell from '@/component/cell.vue'
import modal from '@/component/modal.vue'
import { s_EditContent } from "@/utils/request.js"
import { confirm, r_UpdateContent } from "@/utils/function.js"
export default {
  components: {
    checkbox,
    dayPicker,
    timePicker,
    modal,
    cell
  },
  props: {
    editSense: Object
  },
  data () {
    return {
      show: false,
      sid: -1,
      content: "",
      sense: {},
      radioItems: [{
        property: { "icon": "text-blue cuIcon-radioboxfill", "color": "bg-cyan" },
        checked: true
      },
      {
        property: { "icon": "text-blue cuIcon-radioboxfill", "color": "bg-blue" },
        checked: false
      }, {
        property: { "icon": "text-red cuIcon-attentionforbidfill", "color": "bg-red" },
        checked: false
      },
      {
        property: { "icon": "text-green cur cuIcon-noticefill", "color": "bg-green" },
        checked: false
      },
      {
        property: { "icon": "text-grey cuIcon-evaluate_fill", "color": "bg-grey" },
        checked: false
      },

      ],
      day: "2018-1-22",
      time: "12:00",
    }
  },
  methods: {
    //调用此方法显示抽屉
    showDrawer (type) {
      this.show = true
    },
    closeDrawer (type) {
      this.show = false
    },
    showModal () {
      this.$refs.modal.showModal()
    },
    action () {
    },
    init: function () {
      this.sid = this.editSense.Sid
      this.content = this.editSense.Content
      this.day = this.editSense.Day
      this.time = this.editSense.Hour
    },
    checkBox (e) {
      let index = parseInt(e.detail.__args__[0])
      for (let i = 0; i < this.radioItems.length; i++) {
        this.radioItems[i].checked = false
      }
      this.radioItems[index].checked = true
    },
    getProperty: function () {
      let arr = {}
      this.radioItems.forEach(v => {
        if (v.checked == true) {
          arr["icon"] = v.property.icon
          arr["color"] = v.property.color
        }
      });
      return arr
    },
    editContent: function () {
      let userId = uni.getStorageSync('userId')
      let rid = uni.getStorageSync('rid')
      let property = this.getProperty()
      let data = { "sid": this.sid, "rid": rid, "userId": userId, "content": this.content, "icon": property.icon, "color": property.color, "day": this.day, "hour": this.time, "type": 1 }
      console.log(data);
      data = JSON.stringify(data)
      s_EditContent(data).then(res => {
        console.log(res);
        let title = "添加成功"
        if (typeof res.data.data == "string") {
          title = "修改成功"
        }
        r_UpdateContent(rid)
        confirm(1, title, 2, "/pages/sense/index?rid=" + rid)
      })
      this.closeDrawer()
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped>
/* 自定义内容区样式需自行控制 */
.fui-scroll__view {
  width: 520rpx;
  flex: 1;
  overflow: hidden;
}

.content {
  padding: 10px 20px;
  .item {
    .title {
      margin: 15px 0;
    }
  }
}

.write {
  border: 1px solid skyblue;
}
</style>